<template>
	<view class="content">
		<view class="top">
			<uni-nav-bar title="登录" backgroundColor="transparent" :border="false"></uni-nav-bar>
			<view class="box">
				<view class="avatar">
					<u-avatar class="avatar-item" :src="avatar" size="80"
						style="border: 1rpx solid #ff5500;"></u-avatar>
						<view class="tips-box">{{logo_title}}</view>
				</view>
				<view class="form" >
					<view class="item" style="padding-top: 120rpx;border-bottom: 1px solid #ff5500;">
						<view class="label" @click="mobileShow">
							<text class="icon-shouji iconfont" style="font-size: 40rpx;"></text>
							<text class="label-text">手机号</text>
						</view>
						<view class="input" style="padding-bottom: 20rpx;">
							<u-input placeholder="请输入..." fontSize="20" type="number" placeholder-style="color:red;font-size:40rpx" border="none" clearable :maxlength="11" :focus="focusForm.mobile"
								v-model="loginForm.mobile"></u-input>
						</view>
					</view>
					<view class="item" style="padding-top: 90rpx;border-bottom: 1px solid #ff5500;" >
						<view class="label" style="display: flex;" @click="passwordShow">
							<text class="icon-jiesuo iconfont" style="font-size: 40rpx;"></text>
							<text class="label-text">密码</text>
						</view>
						<view class="input" style="padding-bottom: 20rpx;">
							<u-input confirmType="done" v-model="loginForm.password"  :focus="focusForm.password"
								:password="isPassword" :clearable="true" placeholder="请输入..."
								fontSize="20" placeholder-style="color:red;font-size:40rpx" border="none">
								<template slot="suffix">
									<u-icon :name="isPassword ? 'eye': 'eye-fill'" size="30"
										@click="handleShowPass"></u-icon>
								</template></u-input>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="login">
						<view class="login-btn" @click="login">
							登录
						</view>
					</view>
					<view class="forget">
						<text class="registered" @click="goRegistered"> 注册</text>
						<text @click="goRetrievepwd">忘记密码? </text>
					</view>
				</view>
				<view class="agreement">
					<checkbox-group @change="checkbox">
						<label>
							<checkbox value="cb" :checked="loginChecked" style="transform:scale(0.6)" />
						</label>
					</checkbox-group>
					<text>我已同意并阅读</text>
					<text class="blue" @click="linkurl('1')">《用户协议》</text>
					<text class="blue" @click="linkurl('2')">《隐私协议》</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="prompt">
				<view class="prompt-title">
					用户协议和隐私协议引导
				</view>
				<view class="prompt-con">
					<text>进入下一步，请阅读并同意</text>
					<text class="link" @click="linkurl('1')">《用户协议》</text>
					<text>和</text>
					<text class="link" @click="linkurl('2')">《隐私协议》</text>
				</view>
				<view class="prompt-ok">
					<view class="prompt-btn" @click="okPrompt">
						同意并登录
					</view>
				</view>
				<view class="prompt-on">
					<view class="prompt-btn" @click="noPrompt">
						不同意
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		checkMobile
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				avatar: '',
				loginChecked: false,
				mobileFocus: false,
				passwordFocus: false,
				isPassword: true,
				loginForm: {
					mobile: '',
					password: '',
				},
				logo_title:'',
				focusForm:{
					mobile: false,
					password:false,
				}
			}
		},
		onLoad() {
			uni.getStorage({
				key:'loginForm',
				success: (res) => {
					this.loginForm = res.data
				}
			})
			this.getSetingFunc()
			// this.avatar = this.$store.state.user.avatar
		},
		methods: {
			resetFocus(){
				this.focusForm={
					mobile: false,
					password:false,
				}
			},
			mobileShow(){
				this.resetFocus()
				this.focusForm.mobile = true
			},
			passwordShow(){
				this.resetFocus()
				this.focusForm.password = true
			},
			handleShowPass(){
				this.isPassword = !this.isPassword
			},
			getSetingFunc(){
				this.$api.getSetingApi().then(res=>{
					uni.setStorageSync('settingData',res.data)
					let data1=res.data
					console.log(data1)
					this.logo_title = data1.value.logo_title
					this.avatar = data1.image
				})
			},
			linkurl(type) {
				let url = ''
				if (type == 1) {
					url = "https://app.fjxmlz.com/htmls/static/service.html"
				} else {
					url = "https://app.fjxmlz.com/htmls/static/privacy.html"
				}
				uni.navigateTo({
					url: "/pages/webpage/webpage?link=" + url
				})
			},
			login() {
				if (!this.loginChecked) {
					this.$refs.popup.open('center')
					return
				}
				if (!this.loginForm.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				}

				if (!this.loginForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return
				}
				if (this.loginForm.password.length < 6) {
					uni.showToast({
						title: '密码至少为六位',
						icon: 'none'
					});
					return
				}
				uni.setStorage({
					key:'loginForm',
					data:this.loginForm,
					success: () => {
						this.$api.login(this.loginForm).then(res => {
							this.$store.commit('login/setToken', res.data.token)
							uni.switchTab({
								url: '/pages/index/index'
							})
						}).catch(err => {
							console.log(err);
						})
					}
				})
				
			},
			goRegistered() {
				uni.redirectTo({
					url: '/pages/registered/registered'
				})
			},
			goRetrievepwd() {
				uni.navigateTo({
					url: '/pages/login/retrievepwd'
				})
			},
			checkbox(e) {
				this.loginChecked = !!e.detail.value[0]
			},
			okPrompt() {
				this.loginChecked = true
				this.$refs.popup.close()
				this.login()
			},
			noPrompt() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 80rpx
	}

	.content {
		background: url('@/static/img/bg1.png') no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
		}
	}

	.avatar {
		padding-top: 100rpx;

		.avatar-item {
			margin: 0 auto;
		}
		.tips-box{
			font-size: 36rpx;
			font-weight: bold;
			color: #ed6d25;
			// background: linear-gradient(to right,#faa9a6,#eace2f,#D06122);
			// background-clip: text;
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			margin-top: 30rpx;
			text-align: center;
		}
	}

	.label {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #111111;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		padding-bottom: 20rpx;

		.label-text {
			padding-left: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.btn {
		padding-top: 80rpx;

		.login {
			display: flex;
			justify-content: center;

			.login-btn {
				width: 650rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
				border-radius: 16rpx;
				line-height: 90rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
				font-style: normal;
			}
		}

		.forget {
			padding: 0 20rpx;
			padding-top: 30rpx;
			display: flex;
			justify-content: space-between;

			text {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #D06122;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				border-bottom: 2rpx solid #D06122;
			}

			.registered {
				margin-left: 20rpx;
			}
		}
	}

	.agreement {
		padding-top: 100rpx;
		display: flex;
		justify-content: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		line-height: 60rpx;
		text-align: left;
		font-style: normal;
	}

	.blue {
		color: #347ced;
	}

	.prompt {
		width: 500rpx;
		height: 400rpx;
		background: white;
		border-radius: 15rpx;
		padding: 20rpx;

		.prompt-title {
			text-align: center;
		}

		.prompt-con {
			margin-top: 30rpx;
			padding: 10rpx;
			text-indent: 2em;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28;
			font-style: normal;
		}

		.link {
			color: #2979ff;
			border-bottom: 1rpx solid #2979ff;
		}

		.prompt-ok {
			margin-top: 30rpx;
			padding: 10rpx;

			.prompt-btn {
				background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
				height: 70rpx;
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.prompt-on {
			padding: 10rpx;

			.prompt-btn {
				border: 1rpx solid #EA6F29;
				height: 70rpx;
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #EA6F29;
				line-height: 70rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
</style>